<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        #container {
            width: 900px;
            background-color: #ccc;
        }
        #container > div {
            width: 120px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #000;
            border-radius: 5px;
            float: left;
            margin: 5px 5px 0;
        }
        
        #container > div.demo-1 {
            background-color: yellowgreen;
        }
        #container > div.demo-2 {
            background-color: skyblue;
        }
        #container > div.demo-3 {
            background-color: rgb(235, 148, 191);
        }

    </style>
</head>
<body>

    <div id="container">
        <div data-type="1"><span>曹操</span></div>
        <div data-type="2"><span>刘备</span></div>
        <div data-type="3"><span>孙权</span></div>
        <div data-type="2"><span>孔明</span></div>
        <div data-type="1"><span>司马懿</span></div>
        <div data-type="2"><span>关羽</span></div>
        <div data-type="2"><span>黄忠</span></div>
        <div data-type="1"><span>许褚</span></div>
        <div data-type="3"><span>周瑜</span></div>
        <div data-type="2"><span>张飞</span></div>
        <div data-type="3"><span>鲁肃</span></div>
        <div data-type="2"><span>马超</span></div>
        <div data-type="2"><span>赵云</span></div>
    </div>


    <script>
        // 要求：
            // 根据自定义属性 data-type,设置指定标签的背景色。

        // 思考：
            // 我需要控制页面哪些标签? 获取页面相关元素
            // 如何设置标签的背景色? 设置className
            // 根据自定义属性值，分别给标签设置不同的背景色

        // 编码：
            // 1.0 获取 #container > div 标签
            var arrDiv = document.querySelectorAll("#container > div");
            console.log(arrDiv);
            // 2.0 通过属性className设置类名
            // arrDiv[1].className="demo-2";
            // var _type = arrDiv[1].dataset.type;
            // var _type = arrDiv[2].dataset.type;
            // var _type = arrDiv[3].dataset.type;
            // var _type = arrDiv[4].dataset.type;
            // console.log(_type);

            // 3.0 循环语句
            for(var i = 0 ; i < arrDiv.length ; i ++){
                // 获取当前的自定义属性值
                var _type = arrDiv[i].dataset.type;
                // 判断自定义属性值 
                if(_type == "1"){
                    // 设置魏国的背景色
                    arrDiv[i].className = "demo-1";
                }else if(_type == "2"){
                    // 设置蜀国的背景色
                    arrDiv[i].className = "demo-2";
                }else if(_type == "3"){
                     // 设置吴国的背景色
                     arrDiv[i].className = "demo-3";
                }
            }
        


        


    </script>
</body>
</html>